<template>
	<div class="echarts-box">
		<div id="pieEcharts" :style="{ width: '100%', height: '300px' }"></div>
	</div>
</template>


<script setup>
	import * as echarts from "echarts";
	import {
		onMounted,
		onUnmounted,
		reactive
	} from 'vue';

	/// 声明定义一下echart
	let echart = echarts;

	onMounted(() => {
		initChart();
	});

	onUnmounted(() => {
		echart.dispose;
	});

	// 基础配置一下Echarts
	function initChart() {
		let chart = echart.init(document.getElementById("pieEcharts"));
		let option = {
			title: {
				left: 'center'
			},
			tooltip: {
				trigger: 'item'
			},
			legend: {
				orient: 'vertical',
				left: 'left'
			},
			series: [{
				itemStyle: {
					borderRadius: 10,
					borderColor: '#fff',
					borderWidth: 2
				},
				name: '客户数量',
				type: 'pie',
				radius: ['40%', '70%'],
				avoidLabelOverlap: false,
				data: [{
						value: 40,
						name: '现有客户'
					},
					{
						value: 33,
						name: '当地咨询'
					},
					{
						value: 0,
						name: '网络平台'
					},
					{
						value: 35,
						name: '展会'
					},
					{
						value: 0,
						name: '外出拜访'
					},
					{
						value: 5,
						name: '供应商'
					},
					{
						value: 52,
						name: '市场挖掘'
					},
					{
						value: 0,
						name: '推广'
					},
				],
				color: ['#f49e17', '#1a9f84', '#ffcb13', '#8c45ad', '#d95000', '#2aaf5e', '#96a4a5',
					'#1f84b8'
				],
				emphasis: {
					itemStyle: {
						shadowBlur: 10,
						shadowOffsetX: 0,
						shadowColor: 'rgba(0, 0, 0, 0.5)'
					}
				}
			}]
		};
		// 把配置和数据放这里
		chart.setOption(option);
		window.onresize = function() {
			//自适应大小
			chart.resize();
		};
	}
</script>

<style scoped>

</style>